<template>
  <!-- 分类 -->
  <div class="classifyBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      <div class="searchBtn">
        <router-link to="/search" class="searchInner flex">
          <x-icon type="ios-search-strong" size="22" class="searchIcon"></x-icon>
          <input type="text" class="searchInput" placeholder="搜索内容" />
        </router-link>
      </div>
    </x-header>
    <div class="content flex">
      <ul class="lableBox" style="top:46.48px">
        <li
          v-for="(item,index) in classifyList"
          :class="current==index?'active':''"
          @click="current=index"
        >{{item.label}}</li>
      </ul>
      <div class="list-con" style="top:46.48px">
        <swiper v-if="current==0" :list="bannerList" auto height="100px"></swiper>
        <div v-for="(item,index) in classifyList" :key="index">
          <div v-if="current==index" v-for="(item2,index2) in item.list" class="con-box">
            <div class="goods-title" :key="index2+'2'">{{item2.title}}</div>
            <ul class="clearfix">
              <li v-for="(item3,index3) in item2.goodsList" @click="goSearch(item3)">
                <router-link :to="{name: 'search'}" :key="index3+'3'" class="jumpLink">
                  <img :src="item3.img" alt />
                  <div>{{item3.name}}</div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader, Swiper } from "vux";
import Bus from '@/js/bus.js'
export default {
  components: {
    XHeader,
    Swiper
  },
  data() {
    return {
      current: 0,
      classifyList: [
        {
          label: '热门推荐',
          list: [
            {
              title: '热门推荐',
              goodsList: [
                {
                  name: '空调',
                  img: require('../assets/images/1526974072412_app_wap_list.jpg')
                },
                {
                  name: '取暖器',
                  img: require('../assets/images/1574040779889_app_wap_list.jpg')
                },
                {
                  name: '洗衣机',
                  img: require('../assets/images/1493018450115_pc_list.jpg')
                },
                {
                  name: '羽绒服',
                  img: require('../assets/images/1572917425316_imgApp_tmndir.jpg')
                },
              ]
            },
            {
              title: '热门推荐',
              goodsList: [
                {
                  name: '空调',
                  img: require('../assets/images/1526974072412_app_wap_list.jpg')
                },
                {
                  name: '取暖器',
                  img: require('../assets/images/1574040779889_app_wap_list.jpg')
                },
                {
                  name: '洗衣机',
                  img: require('../assets/images/1493018450115_pc_list.jpg')
                },
                {
                  name: '羽绒服',
                  img: require('../assets/images/1572917425316_imgApp_tmndir.jpg')
                },
              ]
            },
          ]
        },
        {
          label: '手机数码',
          list: [
            {
              title: '热销品牌',
              goodsList: [
                {
                  name: '空调',
                  img: require('../assets/images/1526974072412_app_wap_list.jpg')
                },
                {
                  name: '取暖器',
                  img: require('../assets/images/1574040779889_app_wap_list.jpg')
                },
                {
                  name: '洗衣机',
                  img: require('../assets/images/1493018450115_pc_list.jpg')
                },
                {
                  name: '羽绒服',
                  img: require('../assets/images/1572917425316_imgApp_tmndir.jpg')
                },
              ]
            },
            {
              title: '手机大牌',
              goodsList: [
                {
                  name: '小米',
                  img: require('../assets/images/1526974072412_app_wap_list.jpg')
                },
                {
                  name: '华为',
                  img: require('../assets/images/1574040779889_app_wap_list.jpg')
                },
                {
                  name: '小米',
                  img: require('../assets/images/1526974072412_app_wap_list.jpg')
                },
                {
                  name: '华为',
                  img: require('../assets/images/1574040779889_app_wap_list.jpg')
                },

              ]
            },
          ]
        },

      ],
      bannerList: [{
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
        title: '送你一朵fua'
      }, {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
        title: '送你一辆车'
      }, {
        url: 'javascript:',
        title: '送你一次旅行',
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
      }]
    }
  },
   mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#fff')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    goSearch(data) {
      Bus.$emit('link', data.name)
    }
  },
}
</script>

<style lang="less" scoped>
.classifyBox {
  font-size: 24px;
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    // position: fixed;
    // top:0;
    // left: 0;
    // right: 0;
    // 搜索
    .searchBtn {
      padding: 0 20px;
      margin-top: 10px;
      .searchInner {
        background-color: #f5f5f5;
        border-radius: 10px;
        padding: 10px 20px;
        .searchIcon {
          fill: #6c6c6c;
          margin-right: 10px;
        }
        .searchInput {
          outline: none;
          border: none;
          background-color: #f5f5f5;
        }
      }
    }

    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      margin: 0 80px;
      margin-right: 20px;
    }
    .vux-header-right {
      color: #000;
      .headRight {
        img {
          width: 40px;
          padding-left: 30px;
        }
      }
    }
  }
  .content {
    .lableBox {
      position: fixed;
      left: 0;
      top: 100px;
      width: 180px;
      height: calc(~'100vh - 95px');
      overflow-y: auto;
      z-index: 5;
      background-color: #f4f4f4;
      li {
        position: relative;
        float: left;
        width: 180px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: #f4f4f4;
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        box-sizing: border-box;
        font-size: 30px;
        color: #666;
      }
      li.active {
        border-right-color: transparent;
        background: #fff;
        font-size: 30px;
      }
    }
    .list-con {
      flex-grow: 1;
      height: calc(~'100vh - 110px');
      overflow-y: auto;
      z-index: 5;
      box-sizing: border-box;
      margin: 0 0 0 180px;
      padding: 20px;
      .con-box {
        .goods-title {
          position: relative;
          width: 100%;
          font-size: 28px;
          text-align: left;
          margin: 20px auto;
          background: #fff;
          padding-right: 20px;
          overflow: hidden;
          box-sizing: border-box;
          &::before {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 150px;
            content: '';
            height: 1px;
            background: #f2f2f2;
          }
        }
        ul {
          list-style: none;
          li {
            width: 32%;
            float: left;
            .jumpLink {
              text-align: center;
              color: currentColor;
              display: block;
              img {
                width: 120px;
                height: 120px;
                margin: 10px auto;
                position: relative;
              }
              div {
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
</style>